<template>
  <div class="bg-w">
    <div class="container exp-box">
      <!-- <build-el-bread></build-el-bread> -->
      <!-- <build-el-h1 name="奖项说明-黑色.png"></build-el-h1> -->
      <div class="my-title">奖项申报</div>
      <div class="title">{{ details.title }}</div>
      <p class="fwb" v-html="details.awardContent"></p>
      <newkejichuangxinchengguo
        ref="formNameF"
        :form="form"
        v-if="details.pageUrl === 'newkejichuangxinchengguo'"
      ></newkejichuangxinchengguo>
      <newkejichuangxingongcheng
        ref="formNameF"
        :form="form"
        v-if="details.pageUrl === 'newkejichuangxingongcheng'"
      ></newkejichuangxingongcheng>
      <newkejirencai
        ref="formNameF"
        :form="form"
        v-if="details.pageUrl === 'newkejirencai'"
      ></newkejirencai>
      <newshejichuangxin
        ref="formNameF"
        :form="form"
        v-if="details.pageUrl === 'newshejichuangxin'"
      ></newshejichuangxin>
      <el-button
        style="width:100%;margin-top:20px;"
        type="primary"
        @click="handSub"
        >提 交</el-button
      >
      <div class="exp-title-exp">
        1.按要求填写在线基础表格内容并提交相关材料。
        <br />2.请使用电脑登录中装协官网，在官网下载《科技创新成果奖》word版本，按照附件内容完成资料填写，并在线上传。
        官网链接：www.cbda1984.com
      </div>
      <div v-margin-top="'30px'"></div>
    </div>
  </div>
</template>
<script>
import buildElH1 from '@/components/build-el-h1'
import JSONData from '@/assets/JSON'
import newkejichuangxinchengguo from './ExplainForm/newkejichuangxinchengguo'
import newkejichuangxingongcheng from './ExplainForm/newkejichuangxingongcheng'
import newkejirencai from './ExplainForm/newkejirencai'
import newshejichuangxin from './ExplainForm/newshejichuangxin'
export default {
  components: {
    buildElH1,
    newkejichuangxinchengguo,
    newkejichuangxingongcheng,
    newkejirencai,
    newshejichuangxin,
  },
  data() {
    return {
      ...JSONData,
      details: {},
      list: [],
      form: {},
    }
  },
  async mounted() {
    this.awardId = this.$route.query.awardId
    await this.init()
  },
  methods: {
    async init() {
      let awardId = ''
      if (this.awardId) {
        awardId = this.awardId
      } else {
        let res = await this.api.selectAward({
          pageSize: 1000,
          page: 1,
          awardType: 2,
        })
        awardId = res.list[0].awardId
      }
      //查询科技奖详情
      let res2 = await this.api.selectOneAward({
        awardId,
      })
      this.details = res2[0]
      console.log(this.details, '获取奖项详情')
    },
    async handSub() {
      if (!this.$refs['formNameF']) {
        this.$toast('没有可填写的申请表')
        return
      }
      this.form.status = 0
      if (this.details.pageUrl === null) {
        this.$toast('请登录官网,上传附件!')
      } else {
        this.$refs['formNameF'].$refs.formName.validate(async (valid) => {
          if (valid) {
            let newFomr = {
              awardId: this.details.awardId,
              declareType: 0,
              ...this.form,
            }
            // updateAwardDeclare
            let res = await this.api.addAwardDeclare(newFomr)
            this.$toast('申报成功')
            for (let key in this.form) {
              this.form[key] = ''
            }
            this.init()
          } else {
            this.$toast('请完成必要信息的填写以及填写格式')
            return false
          }
        })
      }
    },
  },
}
</script>
<style lang="less" scoped>
.exp-box {
  text-align: left;
  .exp-title-exp {
    color: #333;
    font-size: 16px;
    margin-top: 15px;
  }
  .title {
    margin-bottom: 10px;
    font-weight: bold;
    font-size: 16px;
    color: #333;
    margin-top: 18px;
  }
}
</style>
